<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calm Tasks - Progress</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .neumorphic {
            background: #f1f5f9;
            box-shadow: 
                20px 20px 60px #d1d9e6, 
                -20px -20px 60px #ffffff;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.2);
        }
        .neumorphic-inset {
            background: #f1f5f9;
            box-shadow: 
                inset 8px 8px 16px #d1d9e6, 
                inset -8px -8px 16px #ffffff;
            border-radius: 15px;
        }
        .status-bar {
            background: linear-gradient(90deg, #000 0%, #333 100%);
            height: 44px;
        }
        .tab-bar {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }
        .progress-ring {
            transform: rotate(-90deg);
        }
        .progress-circle {
            transition: stroke-dashoffset 0.5s ease-in-out;
        }
        .achievement-badge {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
        }
        .stat-card {
            background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body class="h-screen overflow-hidden">
    <!-- iOS Status Bar -->
    <div class="status-bar flex justify-between items-center px-6 text-white text-sm font-medium">
        <div class="flex items-center space-x-1">
            <span>9:41</span>
        </div>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- Main Content -->
    <div class="flex-1 p-6 pb-24 overflow-y-auto" style="height: calc(100vh - 44px - 83px);">
        <!-- Header -->
        <div class="text-center mb-8">
            <h1 class="text-2xl font-bold text-gray-800 mb-2">Your Progress</h1>
            <p class="text-gray-600">Celebrating every step of your journey 🌟</p>
        </div>

        <!-- Today's Achievement Circle -->
        <div class="neumorphic p-8 mb-6 text-center">
            <h3 class="text-lg font-semibold text-gray-800 mb-6">Today's Achievement</h3>
            <div class="relative w-36 h-36 mx-auto mb-6">
                <svg class="w-36 h-36 progress-ring" viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="50" stroke="#e2e8f0" stroke-width="8" fill="none"/>
                    <circle cx="60" cy="60" r="50" stroke="url(#gradient)" stroke-width="8" fill="none"
                            stroke-dasharray="314" stroke-dashoffset="125.6" stroke-linecap="round" class="progress-circle"/>
                    <defs>
                        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                </svg>
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="text-center">
                        <div class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">60%</div>
                        <div class="text-xs text-gray-500 font-medium">Complete</div>
                    </div>
                </div>
            </div>
            <p class="text-sm text-gray-600 mb-2">3 of 5 tasks completed</p>
            <p class="text-xs text-gray-500">You're doing great! Keep going at your own pace.</p>
        </div>

        <!-- Weekly Stats -->
        <div class="neumorphic p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-6">This Week's Stats</h3>
            <div class="grid grid-cols-2 gap-4">
                <div class="stat-card neumorphic-inset p-5 text-center rounded-xl">
                    <div class="text-3xl font-bold text-blue-600 mb-2">18</div>
                    <p class="text-sm text-gray-600 font-medium">Tasks Completed</p>
                    <div class="flex items-center justify-center mt-2">
                        <i class="fas fa-arrow-up text-green-500 text-xs mr-1"></i>
                        <span class="text-xs text-green-600">+3 from last week</span>
                    </div>
                </div>
                <div class="stat-card neumorphic-inset p-5 text-center rounded-xl">
                    <div class="text-3xl font-bold text-green-600 mb-2">5</div>
                    <p class="text-sm text-gray-600 font-medium">Anxiety Wins</p>
                    <div class="flex items-center justify-center mt-2">
                        <i class="fas fa-heart text-pink-500 text-xs mr-1"></i>
                        <span class="text-xs text-pink-600">Social victories</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Achievements -->
        <div class="neumorphic p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-6">Recent Achievements</h3>
            <div class="space-y-4">
                <!-- Achievement 1 -->
                <div class="flex items-center space-x-4 p-4 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-xl border border-yellow-100">
                    <div class="achievement-badge w-14 h-14 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-star text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <p class="font-semibold text-gray-800">First Week Complete!</p>
                        <p class="text-sm text-gray-600 mt-1">You've been consistent for 7 days straight</p>
                    </div>
                    <div class="text-xs text-gray-500">2 days ago</div>
                </div>
                
                <!-- Achievement 2 -->
                <div class="flex items-center space-x-4 p-4 bg-gradient-to-r from-green-50 to-blue-50 rounded-xl border border-green-100">
                    <div class="achievement-badge w-14 h-14 bg-gradient-to-br from-green-400 to-blue-500 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-phone text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <p class="font-semibold text-gray-800">Social Warrior</p>
                        <p class="text-sm text-gray-600 mt-1">Made 3 important phone calls this week</p>
                    </div>
                    <div class="text-xs text-gray-500">Yesterday</div>
                </div>
                
                <!-- Achievement 3 -->
                <div class="flex items-center space-x-4 p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl border border-purple-100">
                    <div class="achievement-badge w-14 h-14 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-heart text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <p class="font-semibold text-gray-800">Self-Care Champion</p>
                        <p class="text-sm text-gray-600 mt-1">Completed 5-day meditation streak</p>
                    </div>
                    <div class="text-xs text-gray-500">Today</div>
                </div>
            </div>
        </div>

        <!-- Mood Trends -->
        <div class="neumorphic p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-6">Mood & Anxiety Trends</h3>
            
            <!-- Average Mood -->
            <div class="neumorphic-inset p-5 mb-4">
                <div class="flex justify-between items-center mb-3">
                    <span class="text-sm text-gray-600 font-medium">Average Mood</span>
                    <span class="text-sm font-semibold text-blue-600">Good (7.2/10)</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-3 mb-2">
                    <div class="bg-gradient-to-r from-blue-400 to-blue-600 h-3 rounded-full transition-all duration-500" style="width: 72%"></div>
                </div>
                <p class="text-xs text-gray-500">↗️ Improving over the past week</p>
            </div>

            <!-- Anxiety Management -->
            <div class="neumorphic-inset p-5">
                <div class="flex justify-between items-center mb-3">
                    <span class="text-sm text-gray-600 font-medium">Anxiety Management</span>
                    <span class="text-sm font-semibold text-green-600">Better (6.8/10)</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-3 mb-2">
                    <div class="bg-gradient-to-r from-green-400 to-green-600 h-3 rounded-full transition-all duration-500" style="width: 68%"></div>
                </div>
                <p class="text-xs text-gray-500">🎯 You're getting better at managing anxiety</p>
            </div>
        </div>

        <!-- Insights & Patterns -->
        <div class="neumorphic p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Weekly Insights</h3>
            <div class="space-y-3">
                <div class="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-clock text-blue-600 text-sm"></i>
                    </div>
                    <p class="text-sm text-gray-700">You're most productive in the morning</p>
                </div>
                <div class="flex items-center space-x-3 p-3 bg-green-50 rounded-lg">
                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-wind text-green-600 text-sm"></i>
                    </div>
                    <p class="text-sm text-gray-700">Breathing exercises help reduce anxiety by 40%</p>
                </div>
                <div class="flex items-center space-x-3 p-3 bg-purple-50 rounded-lg">
                    <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-users text-purple-600 text-sm"></i>
                    </div>
                    <p class="text-sm text-gray-700">Social tasks are getting easier for you</p>
                </div>
            </div>
        </div>

        <!-- Encouragement Card -->
        <div class="neumorphic p-6 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50">
            <div class="text-center">
                <div class="text-4xl mb-4">🌟</div>
                <h3 class="text-lg font-semibold text-gray-800 mb-3">You're Amazing!</h3>
                <p class="text-sm text-gray-600 mb-4">Every small step you take is a victory. Your progress might seem slow to you, but you're moving mountains in your own way.</p>
                <div class="flex justify-center space-x-4 text-xs text-gray-500">
                    <span>💪 Resilient</span>
                    <span>🎯 Focused</span>
                    <span>❤️ Brave</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Tab Bar -->
    <div class="tab-bar fixed bottom-0 left-0 right-0 h-20 flex items-center justify-around px-6">
        <div class="flex flex-col items-center space-y-1">
            <i class="fas fa-home text-gray-400 text-lg"></i>
            <span class="text-xs text-gray-400">Home</span>
        </div>
        <div class="flex flex-col items-center space-y-1">
            <i class="fas fa-tasks text-gray-400 text-lg"></i>
            <span class="text-xs text-gray-400">Tasks</span>
        </div>
        <div class="flex flex-col items-center space-y-1">
            <i class="fas fa-smile text-gray-400 text-lg"></i>
            <span class="text-xs text-gray-400">Mood</span>
        </div>
        <div class="flex flex-col items-center space-y-1">
            <i class="fas fa-chart-line text-blue-600 text-lg"></i>
            <span class="text-xs text-blue-600 font-medium">Progress</span>
        </div>
        <div class="flex flex-col items-center space-y-1">
            <i class="fas fa-cog text-gray-400 text-lg"></i>
            <span class="text-xs text-gray-400">Settings</span>
        </div>
    </div>
</body>
</html>